<template>
  <div class="content">
    <van-nav-bar
      title="历史记录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group inset v-for="(item, index) in list" :key="index">
      <van-cell
        :title="item.attendance_type"
        :value="item.start_time"
        is-link
        @click="showPopup(index)"
      />
      <van-popup
        v-model:show="show[index].ft"
        position="bottom"
        :style="{ height: '70%' }"
        round
        closeable
      >
        <van-cell-group>
          <van-nav-bar title="请假详情" />
          <van-cell title="请假类别" :value="item.attendance_type" />
          <van-cell title="详情" :value="item.content" />
          <van-cell title="开始时间" :value="item.start_time" />
          <van-cell title="结束时间" :value="item.end_time" />
        </van-cell-group>
      </van-popup>
    </van-cell-group>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import { Cell, CellGroup } from "vant";
import axios from "axios";
export default {
  watch: {
    $route() {
      window.location.reload();
    },
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      show: [
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
      ],
    };
  },
  methods: {
    showPopup(index) {
      this.show[index].ft = !this.show[index].ft;
    },
  },
  setup() {
    const posts = ref([]);
    axios
      .get("http://127.0.0.1:8088/attendance")
      .then(
        (response) => (
          (posts.value = response.data), console.log(response.data[0])
        )
      )
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });
    const onClickLeft = () => history.back();
    const list = posts;
    return {
      onClickLeft,
      list,
    };
  },
};
</script>

<style>
:root {
  --van-nav-bar-icon-color: white;
  --van-nav-bar-background-color: #00bfff;
  --van-nav-bar-text-color: white;
  --van-nav-bar-title-text-color: white;
}
.li1 {
  margin: 10px;
  box-shadow: #999 0px 0px 8px 1px;
  border-radius: 5px;
}

.li2 {
  margin: 10px;
}

.sp1 {
  margin-right: 215px;
}

.sp2 {
  margin-right: 200px;
}

.details {
  margin-right: 12px;
  float: right;
}

.sp3 {
  margin-right: 12px;
  float: right;
}

.sp4 {
  margin-left: 20px;
}
</style>
